<template>
  <div class="home-new">
    <div class="home-new-title">
      <h3>每周上新</h3>
    </div>
    <ul>
      <li v-for="item in newList" :key="item.id"> <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <p><span>￥</span>{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import zc from '../assets/images/h1.jpg'
import sl from '../assets/images/sl.jpg'
import mv from '../assets/images/mv.jpg'
import bd from '../assets/images/bd.jpg'
import hg from '../assets/images/hgwz.jpg'
import hs from '../assets/images/hs.jpg'
const newList = [
  { name: '黑神话悟空', list_pic_url: zc, retail_price: '256.00' }, 
  { name: '博德之门3', list_pic_url: bd, retail_price: '338.00' },
  { name: '森林之子', list_pic_url: sl, retail_price: '108' },
  { name: '完蛋！我被美女包围了!', list_pic_url: mv, retail_price: '35' },
  { name: '霍格沃兹之遗', list_pic_url: hg, retail_price: '382' },
  { name: '幻兽帕鲁', list_pic_url: hs, retail_price: '108' },
]
</script>

<style lang="less" scoped>
 .home-new {
   .home-new-title {
     text-align: center;
     font-size: 16px;
     margin-top: 1rem;
     height: 50px;

     h3 {
       width: 50%;
       border-top: 2px solid #ccc;
       padding-top: 8px;
       margin: 0 auto;
     }
   }

   ul {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 1rem 0 0;
     background-color: #f9f9f9;

     li {
       width: 49.5%;

       img {
         width: 100%;
       }

       p {
         text-align: center;
         margin: 0.1px 0;
       }

       span {
         color: #467197;
         font-size: 16px;
       }
     }
   }
 }

 img {
   width: 194.04px;
   height: 100.04px;
 }
</style>